﻿
@{
    ViewBag.Title = "德器物联";
    Layout = "~/Views/Shared/_MyLayout.cshtml";

    int SumNum = ViewBag.SumNum;
    int OnLineNum = ViewBag.OnLineNum;
    int OffLineNum = SumNum - OnLineNum;
    int ExcessNum = ViewBag.ExcessNum;

    double OnLineP = Convert.ToDouble(OnLineNum) / Convert.ToDouble(SumNum) * 100;
    double OffLineP = Convert.ToDouble(OffLineNum) / Convert.ToDouble(SumNum) * 100.0;
    double ExcessP = Convert.ToDouble(ExcessNum) / Convert.ToDouble(SumNum) * 100.0;

}
@section head{
    <link rel="stylesheet" href="~/Content/bigdata2/css/index.css" />
    <link rel="stylesheet" href="~/Content/bigdata2/css/public.css" />
    <link rel="stylesheet" href="~/Content/bigdata2/css/wodry.css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=kSoIGIUPtwLnFbxKLyZfxKYa77SQpoXO"></script>
    <script src="~/Content/bigdata2/echarts.min.js"></script>
    <script src="~/Scripts/gundo.js"></script>

    <style>
        .BMap_center {
            background-color: rgb(4,12,49) !important;
        }
        body{
            overflow-x:hidden;
        }
        .BMap_top {
            left: 1px !important;
            background-color: rgb(4,12,49) !important;
            z-index: 2 !important;
            width: 555px !important;
        }

        .BMap_bottom {
            left: 1px !important;
            background-color: rgb(4,12,49) !important;
            z-index: 2 !important;
            width: 555px !important;
        }

        .BMap_pop img {
            top: 12px;
            left: 402px;
            display: block;
        }
        .BMap_cpyCtrl {
            display: none;
        }

        .anchorBL {
            display: none;
        }
    </style>

    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 30 //li的高度
            });

            $('.BottomScroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 30 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>

}


<div class="main">
    <div class="header">
        <!--        <div class="header-left fl" id="time"></div> -->
        <div class="header-left fl" style="font-size: 0px;">
            <img src="~/Content/bigdata2/images/AA.png" style="height:100%;width: calc(100% - 160px);display: inline-block;" />
            <img src="~/Content/bigdata2/images/CC.png" style="width: 160px;height: 100%;display: inline-block;" />
            <div style="width: calc(100% - 170px);height: 100%;text-align: center;position: absolute;z-index: 9999;top:calc(50% - 17px);left: 10px;">
                <img src="~/Content/bigdata2/images/22.png" style="width: 100%;" />
            </div>
        </div>
        <div class="header-center fl" style="font-size: 0px;">
            <img src="~/Content/bigdata2/images/DD.png" style="height:100%;width: 60px;display: inline-block;" />
            <img src="~/Content/bigdata2/images/BB.png" style="width: calc(100% - 60px);height: 100%;display: inline-block;" />
            <div style="width: 66.7%;height: .75rem;position: absolute;z-index: 9999;top:calc(50% - 23px);left: 460px;">
                <img src="~/Content/bigdata2/images/2.png" style="width: 133px;height: 31px;" />
            </div>
            <div style="width: 66.7%;height: .75rem;position: absolute;z-index: 9999;top:calc(30% - 23px);left: 330px;">
                <img src="~/Content/bigdata2/images/logo5.png" style="width: 130px;height: 45px;" />
                @*<img src="~/Content/Img/logo2.png" style="width: 6vw;height: 4vw;" />*@
            </div>

            <div style="width: 33.3%;height: .75rem;position: absolute;top: 0;right: calc(80px - 16.7%);line-height: .75rem;z-index: 10000;font-size: 12px;">
                <div id="time" style="height: 16px;"></div>
            </div>
        </div>

        <div class="header-center-bottom fr" style="height: .75rem;line-height: .75rem;">
            <img src="~/Content/bigdata2/images/ruzhudanwei.png" style="margin-top: .15rem;position: relative;" />
            <div style="position: absolute;left: 225px;top: 10px;color: #ffff00;font-size: 25px;">@SumNum</div>
            <div style="position: absolute;left: 585px;top: 10px;color: #ffff00;font-size: 25px;">@SumNum</div>
        </div>
    </div>

    <div class="center">
        <!--左边两栏-->
        <div class="center-left fl">
            <div class="left-top rightTop" style="position: relative;">
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />

                <!--               <div class="title">设备运行状态</div> -->
                <div class="tip">
                    <div class="bg-tip" style="width: 240px;">
                        <img src="~/Content/bigdata2/images/sheb-.png" style="width: 25px;height: 25px;" />
                        <img src="~/Content/bigdata2/images/3-.png" style="width: 125px;height: 20px;" />
                    </div>
                </div>

                <div style="margin-top: 24px;margin-bottom: 21px;height: 27px;margin-left: .25rem;margin-right: .25rem;position: relative;">
                    <input style="height: 100%;width: 100%;border-color: #00ffff;color: #707070;font-size: 12px;border-radius: 5px;" placeholder="请输入搜索内容" />
                    <img src="~/Content/bigdata2/images/chaz.png" style="height: 15px;width: 15px;position: absolute;top: calc(50% - 7px);right: 10px;" />
                </div>

                <div class="echart wenzi">
                    <div class="gun">
                        <span style="width: 25%;">企业机构</span>
                        <span style="width: 15%;">中断情况</span>
                        <span style="width: 15%;">油烟</span>
                        <span style="width: 15%;">颗粒物</span>
                        <span style="width: 15%;">VOC</span>
                        <span style="width: 15%;">风机</span>
                    </div>

                    <div id="FontScroll" class="myscroll">
                        <ul>
                            @for (int i = 0; i < ViewBag.DeviceData.Count; i++)
                            {
                                <li>
                                    <div class="fontInner clearfix">
                                        <span class="device_span_1">@ViewBag.DeviceData[i]["Name"]</span>
                                        @if (ViewBag.DeviceData[i]["LastTime"].ToString() != "" && DateTime.Parse(ViewBag.DeviceData[i]["LastTime"]) > DateTime.Now.AddMinutes(-10))
                                        {
                                            <span class="device_span_2" style="color:green">在线</span>
                                        }
                                        else
                                        {
                                            <span class="device_span_2" style="color:red">离线</span>
                                        }
                                        
                                        <span class="device_span_3">@ViewBag.DeviceData[i]["Y1"] </span>
                                        <span class="device_span_4">@ViewBag.DeviceData[i]["K1"] </span>
                                        <span class="device_span_5">@ViewBag.DeviceData[i]["V1"] </span>
                                        <span class="device_span_6">@ViewBag.DeviceData[i]["amp1"]</span>
                                    </div>
                                </li>
                            }
                            @*<li>
                                <div class="fontInner clearfix">
                                    <span class="device_span_1">重庆文理学院</span>
                                    <span class="device_span_2">无</span>
                                    <span class="device_span_3">1A</span>
                                    <span class="device_span_4">2A</span>
                                    <span class="device_span_5">30℃</span>
                                    <span class="device_span_6">60%</span>
                                </div>
                            </li>*@

                        </ul>
                    </div>
                </div>
            </div>

            <div class="left-bottom rightTop" style="position: relative;">
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />
                <!-- <div class="title">浓度超标单位信息</div> -->
                <div class="tip">
                    <div class="bg-tip" style="width: 240px;">
                        <img src="~/Content/bigdata2/images/danwei.png" style="width: 25px;height: 25px;" />
                        <img src="~/Content/bigdata2/images/4.png" style="width: 125px;height: 20px;" />
                    </div>
                </div>


                <div>
                    <div class="left-bottom-gun">
                        <span style="width: 35%;">企业机构</span>
                        <span style="width: 20%;">油烟</span>
                        <span style="width: 15%;">超标比率</span>
                        <span style="width: 30%;">超标时间</span>
                        @*<span style="width: 15%;">风机</span>
                        <span style="width: 15%;">净化器</span>*@
                    </div>

                    <div class="BottomScroll" id="BottomFontScroll">
                        <ul>
                            @for (int i = 0; i < ViewBag.ExcessList.Count; i++)
                            {
                                <li>
                                    <div class="BottomFontInner clearfix">
                                        <span class="device_span_1" style="width:35%;">@ViewBag.ExcessList[i]["Name"]</span>
                                        <span class="device_span_2" style="width:20%;">@ViewBag.ExcessList[i]["Y1"]</span>
                                        <span class="device_span_3" style="width:15%;margin-right:0px;">@ViewBag.ExcessList[i]["percentage"]%</span>
                                        <span class="device_span_4" style="width:30%;">@ViewBag.ExcessList[i]["DataTime"]</span>
                                        
                                    </div>
                                </li>
                            }

                            @*<li>
                                <div class="BottomFontInner clearfix">
                                    <span class="device_span_1">重庆文理学院</span>
                                    <span class="device_span_2">无</span>
                                    <span class="device_span_3">1A</span>
                                    <span class="device_span_4">2A</span>
                                    <span class="device_span_5">30℃</span>
                                </div>
                            </li>*@

                        </ul>
                    </div>
                </div>

                <!-- 			   <div class="bottom-b">
                                    <ul>
                                        <li>
                                            <div class="left-bottom-fontInner">
                                                <span class="span_1">政府餐厅一</span>
                                                <span class="span_2">浓度:55</span>
                                                <span class="span_3">超标:24%</span>
                                                <span class="span_4">06-23</span>
                                                <span class="span_5">121231</span>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="left-bottom-fontInner">
                                                <span class="span_1">政府餐厅一</span>
                                                <span class="span_2">浓度:55</span>
                                                <span class="span_3">超标:24%</span>
                                                <span class="span_4">06-23</span>
                                                <span class="span_5">121231</span>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="left-bottom-fontInner">
                                                <span class="span_1">政府餐厅一</span>
                                                <span class="span_2">浓度:55</span>
                                                <span class="span_3">超标:24%</span>
                                                <span class="span_4">06-23</span>
                                                <span class="span_5">121231</span>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="left-bottom-fontInner">
                                                <span class="span_1">政府餐厅一</span>
                                                <span class="span_2">浓度:55</span>
                                                <span class="span_3">超标:24%</span>
                                                <span class="span_4">06-23</span>
                                                <span class="span_5">121231</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div> -->



            </div>
        </div>

        <!--中间两栏-->
        <div class="center-cen fl">
            <div class="cen-top rightTop" style="position: relative;">
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />

                <div class="top-bottom">
                    <div id="mapDetail" class="allnav" style="height: 6.4rem"></div>
                </div>
            </div>
            <div class="cen-bottom">
                <div style="width: calc(75% - 20px);height: 100%;float: left;margin-right: 20px;position: relative;" class="rightTop">
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />
                    <!-- <div class="title">最近24小时油烟污染排放总量</div> -->
                    <div class="tip">
                        <div class="bg-tip" style="width: 330px;">
                            <img src="~/Content/bigdata2/images/feijiawan-.png" style="width: 25px;height: 25px;" />
                            <img src="~/Content/bigdata2/images/5.png" style="width: 272px;height: 20px;" />
                        </div>
                    </div>
                    <div id="echart1" class="allnav"></div>
                </div>

                <div style="width: 25%;height: 100%;float: left;position: relative;" class="rightTop">
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                    <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />
                    <!-- <div class="title">油烟设备统计表</div> -->
                    <div class="tip">
                        <div class="bg-tip" style="width: 210px;">
                            <img src="~/Content/bigdata2/images/tongjibiao-.png" style="width: 25px;height: 25px;" />
                            <img src="~/Content/bigdata2/images/6.png" style="width: 145px;height: 20px;" />
                        </div>
                    </div>
                    <div class="progress-cen">
                        <div>
                            <h3 class="progress-title">在线设备 @OnLineNum/@SumNum</h3>
                            <div class="progress">
                                <div class="progress-bar progress-color" style="width: @OnLineP%;"></div>
                            </div>
                        </div>

                        <div>
                            <h3 class="progress-title">离线设备 @OffLineNum/@SumNum</h3>
                            <div class="progress">
                                <div class="progress-bar progress-color" style="width: @OffLineP%;"></div>
                            </div>
                        </div>

                        <div>
                            <h3 class="progress-title">超标设备 @ExcessNum/@SumNum</h3>
                            <div class="progress">
                                <div class="progress-bar progress-color" style="width: @ExcessP%;"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!--右边三栏-->
        <div class="center-right fr">
            <div class="right-top rightTop" style="position: relative;">
                <!--                <div class="title">最近24小时油烟浓度趋势</div> -->
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />
                <div class="tip">
                    <div class="bg-tip" style="width: 310px;">
                        <img src="~/Content/bigdata2/images/youyan-.png" style="width: 25px;height: 25px;" />
                        <img src="~/Content/bigdata2/images/9.png" style="width: 251px;height: 20px;" />
                    </div>
                </div>
                <div class="right-cen-cent">
                    <div id="echart2" class="allnav"></div>
                </div>
            </div>

            <div class="right-cen" style="position: relative;">
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />
                <!--                <div class="title">最近24小时非甲烷总经趋势</div> -->
                <div class="tip">
                    <div class="bg-tip" style="width: 310px;">
                        <img src="~/Content/bigdata2/images/feijiawan-.png" style="width: 25px;height: 25px;" />
                        <img src="~/Content/bigdata2/images/8.png" style="width: 251px;height: 20px;" />
                    </div>
                </div>
                <div class="right-cen-cent">
                    <div id="echart3" class="allnav"></div>
                </div>
            </div>

            <div class="right-bottom rightTop" style="position: relative;">
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;top: 0;right: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;left: 0;position: absolute;" />
                <img src="~/Content/bigdata2/images/jiao.png" style="width: 9px;height: 9px;bottom: 0;right: 0;position: absolute;" />
                <!-- <div class="title">最近24小时颗粒物浓度趋势</div> -->
                <div class="tip">
                    <div class="bg-tip" style="width: 310px;">
                        <img src="~/Content/bigdata2/images/keliwu.png" style="width: 25px;height: 25px;" />
                        <img src="~/Content/bigdata2/images/7-.png" style="width: 251px;height: 20px;" />
                    </div>
                </div>
                <div class="chat">
                    <div id="echart4" class="allnav"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;
        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + '时' + fillZero(myMinute) + '分' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) realNum = '0' + str;
        else realNum = str;
        return realNum;
    }



    var now1 = new Date();
    now1.setMinutes(now1.getMinutes() - 10);
    var map;
    var DeviceListArray = [];
    var DeviceListJson =JSON.parse('@Html.Raw(ViewBag.DeviceDataJson)');

        //[
        //{ "DeviceId": 1, "MN": "1122334455", "Name": "桂花烤全羊", "Address": "重庆江津区双庆路238号", "ChannelNum": 1, "lon": 106.278685, "lat": 29.424221, "Y1": 0.42, "V1": 4.75, "K1": 2.69, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2020-02-09 23:55:22", "amp1": null, "amp2": null },
        //{ "DeviceId": 2, "MN": "123456789012345678901234", "Name": "双福2通道", "Address": "英利五金机电城", "ChannelNum": 2, "lon": 106.288685, "lat": 29.434221, "Y1": 0.0, "V1": 0.0, "K1": 0.0, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2020-12-23 15:32:17", "amp1": 0.5, "amp2": 0.5 },
        //{ "DeviceId": 9, "MN": "20201102", "Name": "永川区杨庆勇餐馆", "Address": "重庆市永川区胜利路148号", "ChannelNum": 1, "lon": 105.896108, "lat": 29.35939, "Y1": 0.65, "V1": 2.51, "K1": 1.19, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2021-01-07 12:47:00", "amp1": 4.2, "amp2": 0.5 },
        //{ "DeviceId": 10, "MN": "20201109", "Name": "永川区刘二娃餐馆", "Address": "重庆市永川区渝西大道西段34号", "ChannelNum": 1, "lon": 105.896158, "lat": 29.357016, "Y1": 0.37, "V1": 1.43, "K1": 0.72, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2021-01-07 11:57:41", "amp1": 1.4, "amp2": 0.5 },
        //{ "DeviceId": 11, "MN": "20201103", "Name": "永川区韵秋餐饮店", "Address": "庆市永川区玉屏北路186号附2号", "ChannelNum": 1, "lon": 105.906981, "lat": 29.365545, "Y1": 0.38, "V1": 1.46, "K1": 0.69, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2021-01-07 17:33:27", "amp1": 8.7, "amp2": 0.9 },
        //{ "DeviceId": 12, "MN": "20201104", "Name": "永川区柴米油盐餐馆", "Address": "重庆市永川区萱花西路 41、43号", "ChannelNum": 1, "lon": 105.888993, "lat": 29.37245, "Y1": 8.79, "V1": 33.58, "K1": 18.19, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2021-01-07 13:38:21", "amp1": 0.5, "amp2": 0.5 },
        //{ "DeviceId": 13, "MN": "20201110", "Name": "永川区柒陆餐馆 （农家大院）", "Address": "重庆市永川区玉屏北路 361号附1号", "ChannelNum": 1, "lon": 105.909818, "lat": 29.366736, "Y1": 0.28, "V1": 1.1, "K1": 0.52, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2021-01-07 18:14:42", "amp1": 9.5, "amp2": 1.9 },
        //{ "DeviceId": 14, "MN": "20201108", "Name": "永川区山村老灶餐饮店", "Address": "重庆市永川区箕山路17号", "ChannelNum": 1, "lon": 105.900291, "lat": 29.364293, "Y1": 0.38, "V1": 1.48, "K1": 0.7, "Y2": 0.0, "V2": 0.0, "K2": 0.0, "LastTime": "2021-01-05 09:21:42", "amp1": 1.2, "amp2": 0.5 }];

    var opts1 = {
        width: 525,     // 信息窗口宽度
        height: 392,     // 信息窗口高度
        // title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    var opts2 = {
        width: 525,     // 信息窗口宽度
        height: 392,     // 信息窗口高度
        // title: "设备信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    function initMap() {
        // 百度地图API功能
        map = new BMap.Map("mapDetail");
        var IconGray = new BMap.Icon("/Content/Img/icon_1.png", new BMap.Size(32, 32)); //第二个参数为图标大小
        var IconGreen = new BMap.Icon("/Content/Img/icon_2.png", new BMap.Size(32, 32));
        var IconRed = new BMap.Icon("/Content/Img/icon_3.png", new BMap.Size(32, 32));


        var point = new BMap.Point(105.898317, 29.364905);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom();
        map.setMapStyleV2({
            styleId: '116436b35bdb4c1508eea8a5552d0ae2'
        });

        for (var i = 0; i < DeviceListJson.length; i++) {
            console.log('数据打印');
            console.log(DeviceListJson[i]['DeviceId']);

            DeviceListArray.push(DeviceListJson[i]['DeviceId']);
            //这里需要查找其他相似的数组
            for (var j = i + 1; j < DeviceListJson.length; j++) {
                if (DeviceListJson[j]['lon'] == DeviceListJson[i]['lon'] && DeviceListJson[j]['lat'] == DeviceListJson[i]['lat']) {
                    //表明找到相等的,把这个弄进来
                    DeviceListArray.push(DeviceListJson[j]['DeviceId']);
                    //然后需要在原数组内删除掉弄进来的这个元素
                    DeviceListJson.splice(j, 1);
                }
            }

            point = new BMap.Point(DeviceListJson[i]['lon'], DeviceListJson[i]['lat']);
            var marker;
            var LastTime = new Date(Date.parse(DeviceListJson[i]['LastTime']))
            if (LastTime > now1) {
                marker = new BMap.Marker(point, { icon: IconGreen });
            }
            else {
                marker = new BMap.Marker(point, { icon: IconGray });
            }

            //          var InfoContent = "<p>设备名称：" + DeviceListJson[i]['Name'] + "</p>";
            //          InfoContent += "<p>地址：" + DeviceListJson[i]['Address'] + "</p>";

            //          if (DeviceListJson[i]['ChannelNum'] == 1) {
            //              InfoContent += "<p>油烟浓度：" + DeviceListJson[i]['Y1'] + "</p>";
            //              InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i]['V1'] + "</p>";
            //              InfoContent += "<p>颗粒物：" + DeviceListJson[i]['K1'] + "</p>";
            //          }

            /*实例*/
            var InfoContent = "<div style='height:52px;line-height:52px;font-size:14px;'>&nbsp;&nbsp;" + DeviceListJson[i]['Name'] + "&nbsp;&nbsp;&nbsp;&nbsp;" + DeviceListJson[i]['Address']+"</div>";
            InfoContent += '<div style="height: 160px;display: flex;flex-direction: row;width: 525px;justify-content: space-around;">' +
                '<div style="height: 100%;width: 158px;border: 1px solid #084273;display: flex;flex-direction: column;">' +
                '<img src="/Content/bigdata2/images/yy.png" style="width: 65px;height: 52px;margin: 0 auto;margin-top: 10px;"/>' +
                '<span style="display:block;font-size: 12px;color:#ffffff;margin: 0 auto;margin-top: 5px;">油烟</span>' +
                '<span style="display: block;font-size: 24px;color: #ffff00;margin: 0 auto;margin-top: 10px;">' + DeviceListJson[i]['Y1']+'</span></div>' +
                '<div style="height: 100%;width: 158px;border: 1px solid #084273;display: flex;flex-direction: column;">' +
                '<img src="/Content/bigdata2/images/klw.png" style="width: 65px;height: 52px;margin: 0 auto;margin-top: 10px;"/>' +
                '<span style="display:block;font-size: 12px;color:#ffffff;margin: 0 auto;margin-top: 5px;">颗粒物</span>' +
                '<span style="display: block;font-size: 24px;color: #ffff00;margin: 0 auto;margin-top: 10px;">' + DeviceListJson[i]['K1'] +'</span></div>' +
                '<div style="height: 100%;width: 158px;border: 1px solid #084273;display: flex;flex-direction: column;">' +
                '<img src="/Content/bigdata2/images/fwj.png" style="width: 65px;height: 52px;margin: 0 auto;margin-top: 10px;"/>' +
                '<span style="display:block;font-size: 12px;color:#ffffff;margin: 0 auto;margin-top: 5px;">非甲烷</span>' +
                '<span style="display: block;font-size: 24px;color: #ffff00;margin: 0 auto;margin-top: 10px;">' + DeviceListJson[i]['V1'] +'</span>' +
                '</div></div>';
            InfoContent += "<div style='margin-top: 49px;height:52px;line-height:52px;font-size:14px;'>&nbsp;&nbsp;风机电流：" + DeviceListJson[i]['amp1'] + "&nbsp;&nbsp;&nbsp;&nbsp;净化器电流：" + DeviceListJson[i]['amp2']+"</div>";
            InfoContent += '<div style="margin-top: 10px;"><div style="float: left;">&nbsp;&nbsp;</div><div style="float: left;">' +
                '<p style="font-size: 12px;color: #707070;">环保负责人:胡瑞彤</p><p style="font-size: 12px;color: #707070;">负责人：胡瑞彤</p><p style="font-size: 12px;color: #707070;">联系电话：13320205295</p><p style="font-size: 12px;color: #707070;">面积：</p>' +
                '</div><div style="float: left;">&nbsp;&nbsp;&nbsp;</div><div style="float: left;">' +
                '<p style="font-size: 12px;color: #707070;">下次清洗时间：2021-6-21</p><p style="font-size: 12px;color: #707070;"></p>' +
                '</div></div>';

            // else {
            //     InfoContent += "通道1：";
            //     InfoContent += "<p>油烟浓度：" + DeviceListJson[i]['Y1'] + "</p>";
            //     InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i]['V1'] + "</p>";
            //     InfoContent += "<p>颗粒物：" + DeviceListJson[i]['K1'] + "</p>";
            //     InfoContent += "通道2：";
            //     InfoContent += "<p>油烟浓度：" + DeviceListJson[i]['Y2'] + "</p>";
            //     InfoContent += "<p>非甲烷总烃：" + DeviceListJson[i]['V2'] + "</p>";
            //     InfoContent += "<p>颗粒物：" + DeviceListJson[i]['K2'] + "</p>";
            // }

            map.addOverlay(marker);              // 将标注添加到地图中
            addClickHandler(InfoContent, DeviceListJson[i]['ChannelNum'], marker);
            DeviceListArray = [];
        }
    }


    function addClickHandler(InfoContent, ChannelNum, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(InfoContent, ChannelNum, e)
        });
    }

    function openInfo(InfoContent, ChannelNum, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow;
        if (ChannelNum == 1) {
            infoWindow = new BMap.InfoWindow(InfoContent, opts1);
        }
        else {
            infoWindow = new BMap.InfoWindow(InfoContent, opts2);

        }
        map.openInfoWindow(infoWindow, point);

    }

    setInterval(getTime, 1000);

    initMap();





    var SUMData = [];
    var Op4_X = [];
    var Op4_Y = [];
    var Op3_X = [];
    var Op3_Y = [];
    var Op2_X = [];         //颗粒物
    var Op2_Y = [];         //颗粒物



    //////////////////////
    //以下为图表编辑
    $(function () {
        //$.ajaxSettings.async = true;
        $.post("/Panel/GetBlowOffSUM", function (msg) {

            console.log(msg);
            //首先格式化归零数据
            for (var i = 0; i < msg.length; i++) {
                if (msg[i].Y == null || msg[i].V == null || msg[i].K == null) {
                    msg[i].Y = 0;
                    msg[i].V = 0;
                    msg[i].K = 0;
                }
            };
            SUMData = [];
            SUMData_Date = [];
            SUMData_Y = [];
            SUMData_V = [];
            SUMData_K = [];
            for (var i = 0; i < msg.length; i++) {
                var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y, '非甲烷总烃': msg[i].V, '颗粒物': msg[i].K };
                SUMData.push(tempItem);
                SUMData_Date.push(msg[i].DateHour);
                SUMData_Y.push(msg[i].Y);
                SUMData_V.push(msg[i].V);
                SUMData_K.push(msg[i].K);

            }
            $.post("/Panel/GetBlowOffAvg", function (msg) {
                console.log(msg);
                //首先格式化归零数据
                for (var i = 0; i < msg.length; i++) {
                    if (msg[i].Y1 == null || msg[i].V1 == null || msg[i].K1 == null || msg[i].Y2 == null || msg[i].V2 == null || msg[i].K2 == null) {
                        msg[i].Y1 = 0;
                        msg[i].V1 = 0;
                        msg[i].K1 = 0;
                        msg[i].Y2 = 0;
                        msg[i].V2 = 0;
                        msg[i].K2 = 0;
                    }
                };

                //AvgData = [];
                for (var i = 0; i < msg.length; i++) {
                    //var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y1, 'VOC': msg[i].V1, '颗粒物': msg[i].K1 };
                    //AvgData.push(tempItem);

                    Op4_X.push(msg[i].DateHour);
                    Op4_Y.push(((msg[i].Y1 + msg[i].Y2) / 2).toFixed(2));
                    Op3_X.push(msg[i].DateHour);
                    Op3_Y.push(((msg[i].V1 + msg[i].V2) / 2).toFixed(2));

                    Op2_X.push(msg[i].DateHour);
                    Op2_Y.push(((msg[i].K1 + msg[i].K2) / 2).toFixed(2));
                }

                //AvgData2 = [];
                //for (var i = 0; i < msg.length; i++) {
                //    var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y2, 'VOC': msg[i].V2, '颗粒物': msg[i].K2 };
                //    AvgData2.push(tempItem);
                //}
                echart1();
                echart2();
                echart3();
                echart4();
            });

        });



        //$.ajaxSettings.async = true;




        function echart1() {
            var dom = document.getElementById("echart1");
            var myChart = echarts.init(dom);
            option = null;
            option = {
                color: ['#00ffff', '#dd3f70', '#ffff00'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    textStyle: {
                        "color": "#ffffff",
                        "fontSize": 12,
                        "fontFamily": "CN regular"
                    },
                    padding: [15, 20],
                    data: ['油烟浓度', '非甲烷总烃', '颗粒物']
                },
                xAxis: [
                    {
                        name: 'h',
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        type: 'category',
                        axisTick: { show: false },
                        axisLabel: {
                            margin: 2,
                            textStyle: {
                                'color': '#ffffff',
                                "fontSize": 12,
                                "fontFamily": "CN regular"
                            }
                        },
                        data: SUMData_Date
                    }
                ],
                yAxis: [
                    {
                        name: '(mg/m³)',
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                'color': '#ffffff',
                                "fontSize": 12,
                                "fontFamily": "CN regular"
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '油烟浓度',
                        type: 'bar',
                        barGap: 0,
                        data: SUMData_Y
                    },
                    {
                        name: '非甲烷总烃',
                        type: 'bar',
                        data: SUMData_V
                    },
                    {
                        name: '颗粒物',
                        type: 'bar',
                        data: SUMData_K
                    }
                ]
            };


            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echart2() {
            var dom = document.getElementById("echart2");
            var myChart = echarts.init(dom);
            option = null;
            option = {
                xAxis: {
                    name: 'h',
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLabel: {
                        margin: 2,
                        textStyle: {
                            'color': '#1fffff',
                            "fontSize": 12,
                            "fontFamily": "CN regular"
                        }
                    },
                    type: 'category',
                    data: Op4_X
                },
                yAxis: {
                    name: '(mg/m³)',
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1c314a'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            'color': '#ffffff',
                            "fontSize": 12,
                            "fontFamily": "CN regular"
                        }
                    },
                    max: 2
                },
                series: [{
                    data: Op4_Y,
                    type: 'line',
                    color: "#8fff00"
                }]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echart3() {
            var dom = document.getElementById("echart3");
            var myChart = echarts.init(dom);
            option = null;
            option = {
                xAxis: {
                    name: 'h',
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLabel: {
                        margin: 2,
                        textStyle: {
                            'color': '#ffffff',
                            "fontSize": 12,
                            "fontFamily": "CN regular"
                        }
                    },
                    type: 'category',
                    data: Op3_X
                },
                yAxis: {
                    name: '(mg/m³)',
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1c314a'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            'color': '#ffffff',
                            "fontSize": 12,
                            "fontFamily": "CN regular"
                        }
                    },
                    max: 15
                },
                series: [{
                    data: Op3_Y,
                    type: 'line',
                    color: "#dd3f70"
                }]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echart4() {
            var dom = document.getElementById("echart4");
            var myChart = echarts.init(dom);
            option = null;
            option = {
                xAxis: {
                    name: 'h',
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLabel: {
                        margin: 2,
                        textStyle: {
                            'color': '#ffffff',
                            "fontSize": 12,
                            "fontFamily": "CN regular"
                        }
                    },
                    type: 'category',
                    data: Op2_X
                },
                yAxis: {
                    name: '(mg/m³)',
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1c314a'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            'color': '#ffffff',
                            "fontSize": 12,
                            "fontFamily": "CN regular"
                        }
                    },
                    max: 5
                },
                series: [{
                    data: Op2_Y,
                    type: 'line',
                    color: "#00ffff"
                }]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    });




</script>

